<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
  <script type="text/javascript" src="../easyui/jquery.min.js"></script>
  <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

  <script>

		let  MyDataGrid = {

			editIndex: null,
			add: function () {
        $('#tt').datagrid('appendRow', {})
			},

      endRowEdit: function () {
        if (MyDataGrid.editIndex !== null) {
					$('#tt').datagrid('endEdit', this.editIndex);
        }
			}
    };

    $(function () {
      $('#tt').datagrid({
        columns: [
        	[
						{field: 'name', title: '名称', width: 100, align: 'center', editor: 'text'},
						{field: 'text', title: '显示文本', width: 100, align: 'center', editor: 'text'},
						{field: 'parent', title: '父类', width: 100, align: 'center', editor: 'text'},
						{field: 'type', title: '类型', width: 100, align: 'center', editor: 'text'},
          ]
        ],

				onClickRow: function (rowIndex, rowData) {
        	debugger
					MyDataGrid.endRowEdit();
					MyDataGrid.editIndex = rowIndex;
          $('#tt').datagrid('selectRow', rowIndex).datagrid('beginEdit', rowIndex);
				}

      })
		})
  </script>

</head>
<body>

  <div style="width: 410px">

    <div id="btns" style="margin-bottom: 10px">
      <button onclick="MyDataGrid.add()" type="button">增加</button>
      <button type="button">删除</button>
      <button type="button">保存</button>
    </div>

    <table id="tt" data-options="singleSelect:true"></table>
  </div>

</body>
</html>
